@import "./prefix";
@import "./variables";

.#{$component-prefix}docs {
  &-container {
    box-sizing: border-box;
    padding-left: 220px;
    overflow: hidden;

    &-with-simulator {
      padding-right: 384px;
    }
  }

  @media (min-width: 1680px) {
    &-container {
      width: 1680px;
      margin: 0 auto;
    }
  }

  &-content {
    padding: 30px;
    overflow: hidden;

    a {
      margin: 0 1px;
      color: $vant-blue;
      text-decoration: none;

      &:hover {
        color: darken($vant-blue, 10%);
      }

      &:active {
        color: darken($vant-blue, 20%);
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: normal;
      line-height: 1.5;
      color: $vant-black;

      &[id] {
        cursor: pointer;
      }
    }

    h1 {
      margin: 0 0 30px;
      font-size: 30px;
      cursor: default;
    }

    h2 {
      margin: 45px 0 20px;
      font-size: 25px;
    }

    h3 {
      margin-bottom: 16px;
      font-size: 18px;
      font-weight: 600;
    }

    h4 {
      margin: 24px 0 12px;
      font-size: 16px;
      font-weight: 600;
    }

    h5 {
      margin: 24px 0 12px;
      font-size: 15px;
      font-weight: 600;
    }

    p {
      margin: 16px 0;
      font-size: 15px;
      line-height: 26px;
      color: $vant-text-color;
    }

    table {
      width: 100%;
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.5;
      color: $vant-text-color;
      border-collapse: collapse;

      th {
        padding: 8px 10px;
        font-weight: 600;
        text-align: left;

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
        }
      }

      td {
        padding: 8px;
        border-top: 1px solid $vant-code-background-color;

        &:first-child {
          padding-left: 0;
          // version tag
          code {
            padding: 2px 6px;
            margin: 0;
            font-size: 11px;
            font-weight: 600;
            color: $vant-blue;
            background-color: fade($vant-blue, 10%);
            border-radius: 20px;
          }
        }

        &:last-child {
          padding-right: 0;
        }
      }

      em {
        font-family: $vant-code-font-family;
        font-size: 14px;
        font-style: normal;
        color: $vant-green;
      }
    }

    ul, ol {
      padding: 0;
      list-style: none;
    }

    ul li,
    ol li {
      position: relative;
      padding-left: 15px;
      margin: 5px 0 5px 10px;
      font-size: 15px;
      line-height: 26px;
      color: $vant-text-color;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 6px;
        height: 6px;
        margin-top: 10px;
        content: '';
        border: 1px solid $vant-dark-grey;
        border-radius: 50%;
      }
    }

    hr {
      margin: 30px 0;
      border: 0 none;
      border-top: 1px solid #eee;
    }

    p > code,
    li > code,
    table code {
      display: inline;
      padding: 2px 5px;
      margin: 0 2px;
      font-family: inherit;
      font-size: 14px;
      word-break: keep-all;
      background-color: $vant-background-color;
      border-radius: 4px;
      -webkit-font-smoothing: antialiased;
    }

    p > code {
      font-size: 14px;
    }

    section {
      padding: 24px;
      overflow: hidden;
    }

    blockquote {
      padding: 16px;
      margin: 16px 0 0;
      background-color: #ecf9ff;
      border-radius: $vant-border-radius;

      p {
        margin: 0;
      }
    }

    img {
      width: 100%;
      margin: 16px 0;
      border-radius: $vant-border-radius;
    }
  }

  &-card {
    padding: 24px;
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: $vant-border-radius;
    box-shadow: 0 8px 12px #ebedf0;

    h3 {
      margin-top: 0;
    }
  }
}
